<template>
  <div class="dashboard-container">
    <div class="dashboard-header"><div class="dashboard-text" v-text="'你好: ' + name"></div></div>
    <div class="dashboard-header2">
      <div class="title" :class="{ active: index == clickindex }" v-for="(item, index) in titles" :key="index">
        <a href="javascript:void(0);" @click="click(index)" v-text="item.name"></a>
      </div>
    </div>
    <div class="dashboard-img1"></div>
    <div class="dashboard-title center"><div class="text" v-text="title"></div></div>
    <div class="dashboard-foot">
      <div class="foot-l">
        <div class="foot-l-title"></div>
        <div class="foot-l-text" v-html="text">
          <div></div>
        </div>
      </div>
      <div><img :src="img" alt="img" width="200px"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import img1 from '@/assets/dashboard/indexr1.jpg'
import img2 from '@/assets/dashboard/indexr2.jpg'
import img3 from '@/assets/dashboard/indexr3.jpg'
import img4 from '@/assets/dashboard/indexr4.jpg'
import img5 from '@/assets/dashboard/indexr5.jpg'

export default {
  name: 'Dashboard',
  data(){
    return{
      clickindex:0,
      title:'',
      text:'',
      img:'',
      titles:[
        {
          name:'首页',
          title:'共同抗疫',
          img:img1,
          text:'这场突如其来的疫情，让全国上下十四亿人感受到病毒的无情、但同时也看到了全国上下一心、共同抗“疫”的感人场面，也看到了共产党员在面对国家民族危难之际冲锋在前、个人在后的奉献精神。'
        },
        {
          name:'疫情',
          title:'疫情起源',
          img:img2,
          text:'对于这次的新冠病毒起源，至今仍然是一个谜。尽管离第一例患者的出现已经过去了近两个月，全面抗疫也已经进行了37天，但我们依旧未发现病毒是从哪来。最早的时候，蝙蝠火了，大家一致认为蝙蝠是新冠病毒的携带者、感染源，这场疫情是吃蝙蝠引起的'
        },
        {
          name:'关于',
          title:'网站作用',
          img:img3,
          text:'为了更形象的了解实时疫情, 此网站只作为参考展示使用'
        },
        {
          name:'展示',
          title:'展示内容',
          img:img4,
          text:'直观的通过疫情地图查看最新疫情'
        },
        {
          name:'团队',
          title:'团队介绍',
          img:img5,
          text:'我们的十二位组员通过十天的努力，在老师的帮助下，成功的做出了一个直观展示疫情的平台，团队协作精神使我们受益匪浅！'
        }
      ]

    }
  },
  created() {
    this.title=this.titles[0].title
    this.text=this.titles[0].text
    this.img=this.titles[0].img
  },
  computed: {
    ...mapGetters(['name'])
  },
  methods:{
    click(val){
      this.clickindex = val
      this.title=this.titles[val].title
      this.text=this.titles[val].text
      this.img=this.titles[val].img
      console.log(val)
      console.log(this.titles[val])
      console.log(this.img)
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
  }
  &-text {
    font-size: 25px;
    line-height: 50px;
    text-align: center;
  }
  &-header {
    height: 50px;
  }
  &-header2 {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  &-img1 {
    height: 200px;
    background: url(../../assets/dashboard/indexbg.jpg) no-repeat center;
    background-size: cover;
  }
  &-title {
    margin: 50px 0;
  }
  &-foot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

.active {
  color: #339966;
}

.title {
  line-height: 60px;
  width: 100px;
  font-weight: bolder;
}

.title-end {
  margin-right: 100px;
}
.text {
  font-size: 50px;
  color: green;
}
.foot-l-title {
  color: #8b4a25;
  font-weight: bolder;
}
.foot-l {
  width: 500px;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
